<template>
  <div class="g-bd">
    <div class="radio">
      <!-- 电台分类 -->
      <div class="raditype clearfix">
        <ul v-if="radioCateList" :class="radioListShowIndex == 1 ? 'z-show' : ''" data-index="1">
          <li v-for="item in 18" :key="item * 300">
            <router-link
              :to="'/discover/djradio/category?cateId=' + radioCateList[item - 1].id"
              class="radiotype-link"
              ref="radTypeLinkRef"
              :data-index="radioCateList[item - 1].id"
              @click="radTypeLinkClick($event)"
              ><div
                class="icon"
                :style="{ backgroundImage: 'url(' + radioCateList[item - 1].picWebUrl + ')' }"
              ></div>
              <span>{{ radioCateList[item - 1].name }}</span></router-link
            >
          </li>
        </ul>
        <ul v-if="radioCateList" :class="radioListShowIndex == 2 ? 'z-show' : ''" data-index="2">
          <li v-for="item in radioCateList.length - 18" :key="item * 301">
            <router-link
              :to="'/discover/djradio/category?cateId=' + radioCateList[item - 1 + 18].id"
              class="radiotype-link"
              ref="radTypeLinkRef"
              @click="radTypeLinkClick($event)"
              ><div
                class="icon"
                :style="{ backgroundImage: 'url(' + radioCateList[item - 1 + 18].picWebUrl + ')' }"
              ></div>
              <span>{{ radioCateList[item - 1 + 18].name }}</span></router-link
            >
          </li>
          <li class="question">
            <a
              href="https://music.163.com/#/topic?id=18652232"
              target="_blank"
              class="radiotype-link"
            >
              <div class="icon"></div>
              <span>常见问题</span>
            </a>
          </li>
          <li class="apply">
            <a href="javascript:;" class="radiotype-link" @click="$Message({ msg: '功能未开发' })">
              <div class="icon"></div>
              <span>我要做主播</span>
            </a>
          </li>
        </ul>
        <span class="prev" @click="changeRadioList(1)"></span>
        <span class="next" @click="changeRadioList(2)"></span>
        <!-- 轮播图控制点 -->
        <div class="dots" ref="dotsRef">
          <a
            href="javascript:;"
            class="dot"
            :class="radioListShowIndex == item2 ? 'current' : ''"
            @click="changeRadioList(item2)"
            v-for="item2 in 2"
            :key="item2 * 31"
          ></a>
        </div>
      </div>
      <!-- 电台排行 -->
      <div class="radtop">
        <!-- 推荐节目 -->
        <div class="blk f-fl">
          <div class="u-title">
            <h3>
              <router-link to="/discover/djradio/recommend">推荐节目</router-link>
            </h3>
            <router-link to="/discover/djradio/recommend" class="more">更多 ></router-link>
          </div>
          <ul class="topl">
            <li
              v-for="(radio, index) in recomDjList"
              :key="radio.id"
              :class="index % 2 !== 0 ? 'bg' : ''"
            >
              <router-link :to="`/program?id=${radio.id}`" class="a-imgwrap f-fl"
                ><img :src="radio.coverUrl + '?param=40x40'" alt="" />
                <i class="u-iconall ply" @click.prevent="playList(radio)"></i
              ></router-link>
              <div class="f-fl cnt-wrap">
                <h3>
                  <router-link :to="`/program?id=${radio.id}`" :title="radio.name">{{
                    radio.name
                  }}</router-link>
                </h3>
                <p>
                  <router-link :to="`/djradio?id=${radio.radio.id}`" :title="radio.dj.brand">{{
                    radio.dj.brand
                  }}</router-link>
                </p>
              </div>
              <a href="" class="f-fl tag">{{ radio.radio.category }}</a>
            </li>
          </ul>
        </div>
        <!-- 推荐节目排行榜 -->
        <div class="blk f-fr">
          <div class="u-title">
            <h3>
              <router-link to="/discover/djradio/rank">节目排行榜</router-link>
            </h3>
            <router-link to="/discover/djradio/rank" class="more">更多 ></router-link>
          </div>
          <ul class="topl">
            <li
              v-for="(top, index) in radioTopList"
              :key="top.id"
              :class="index % 2 !== 0 ? 'bg' : ''"
            >
              <div class="rank f-fl">
                <em :class="index <= 2 ? 'top' : ''">{{ top.rank.toString().padStart(2, '0') }}</em>
                <span :class="top.lastRank - top.rank > 0 ? 'rank-up' : 'rank-down'"
                  ><i class="u-icn"></i
                  >{{
                    top.lastRank - top.rank > 0 ? top.lastRank - top.rank : top.rank - top.lastRank
                  }}</span
                >
              </div>
              <router-link :to="`/program?id=${top.program.id}`" class="a-imgwrap f-fl tl-a"
                ><img :src="top.program.coverUrl + '?param=40x40'" alt="" />
                <i class="u-iconall ply" @click.prevent="playList(top.program)"></i
              ></router-link>
              <div class="f-fl cnt-wrap tl-cnt">
                <h3>
                  <router-link :to="`/program?id=${top.program.id}`" :title="top.program.name">{{
                    top.program.name
                  }}</router-link>
                </h3>
                <p class="brand">
                  <router-link
                    :to="`/djradio?id=${top.program.radio.id}`"
                    :title="top.program.dj.brand"
                    >{{ top.program.dj.brand }}</router-link
                  >
                </p>
              </div>
              <span class="hot f-fl"
                ><i :style="{ width: (top.score / radioTopList[0].score) * 100 + '%' }"><i></i></i
              ></span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 更多 -->
      <div class="radio-more" v-for="(more, index) in radioMoreList" :key="index * 303">
        <div class="u-title">
          <h3>
            <router-link :to="'/discover/djradio/category?cateId=' + radioMoreId[index]">{{
              more[1].category
            }}</router-link>
            <span class="dot">·</span>电台
          </h3>
          <router-link :to="'/discover/djradio/category?cateId=' + radioMoreId[index]" class="more"
            >更多 ></router-link
          >
        </div>
        <ul class="radlist">
          <li class="f-fl" v-for="mindex in 4" :key="mindex * 304">
            <router-link :to="`/djradio?id=${more[mindex - 1].id}`" class="a-imgwrap f-fl"
              ><img :src="more[mindex - 1].picUrl + '?param=200y200'" alt=""
            /></router-link>
            <div class="cnt-wrap f-fl">
              <h3>
                <router-link
                  :to="`/djradio?id=${more[mindex - 1].id}`"
                  :title="more[mindex - 1].name"
                  >{{ more[mindex - 1].name }}</router-link
                >
              </h3>
              <p>
                {{ more[mindex - 1].rcmdtext }}
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { catelist, programRecom, programTop, radioMore } from '@/api/radio.js'
export default {
  data() {
    return {
      // 电台分类
      radioCateList: null,
      // 控制电台分类列表展示
      radioListShowIndex: 1,
      // 推荐节目列表
      recomDjList: [],
      // 电台节目排行
      radioTopList: [],
      // 更多radio的id
      radioMoreId: [2, 6, 3, 2001, 11],
      // 更多radio列表
      radioMoreList: []
    }
  },
  methods: {
    // 获取电台分类列表
    async getradioCateList() {
      const { data } = await catelist()
      // const { data } = await this.$http.get('/dj/catelist')
      this.radioCateList = data.categories
    },
    // 切换电台列表
    changeRadioList(index) {
      this.radioListShowIndex = index
    },
    // 点击电台分类后切换当前分类样式
    radTypeLinkClick(e) {
      console.log(e.currentTarge.dataset.index)
      window.sessionStorage.setItem('currentRadioCate', e.currentTarge.dataset.index)
      this.$refs.radTypeLinkRef.forEach(item => {
        item.classList.remove('current')
      })
      e.currentTarget.classList.add('current')
      // console.log(this.$refs.radTypeLinkRef)
    },
    // 获取推荐节目数据
    async getRecomDj() {
      const { data } = await programRecom()
      this.recomDjList = data.programs
      // console.log(data)
    },
    // 获取电台排行榜
    async getRadioTopList() {
      const { data } = await programTop(10)
      // console.log(data)
      this.radioTopList = data.toplist
    },
    // 获取更多电台数据
    async getRadioMore() {
      this.radioMoreId.forEach(async id => {
        const url = '/dj/recommend/type?type=' + id
        // console.log(url)
        const { data } = await radioMore(id)
        // const { data } = await this.$http.get(url)
        // console.log(data)
        this.radioMoreList.push(data.djRadios)
      })
    },
    // 将播放列表替换为榜单列表
     playList(program) {
      let tracks = program.mainSong
      tracks.al = tracks.album
      tracks.ar = tracks.artists
      tracks.al.id = tracks.id
      tracks.al.name = tracks.name
      tracks.al.picUrl = program.coverUrl
      tracks.dt = tracks.duration
      const songidList = []
      let index = -1
      const songList = this.$store.state.Music.songList
      songList.forEach(item => {
        songidList.push(item.id)
      })
      if (songidList.includes(tracks.id)) {
        index = songidList.findIndex(item => item === tracks.id)
      } else {
        this.$store.commit('Music/pushSongList', tracks)
      }
      this.$store.commit('Music/setplayerSettingIndex', index == -1 ? songList.length - 1 : index)
    }
  },
  created() {
    // 获取电台分类列表
    this.getradioCateList()
    this.getRecomDj()
    this.getRadioTopList()
    this.getRadioMore()
  }
}
</script>

<style lang="less" scoped>
@import './RandioIndex.less';
</style>
